<template>
    <div class="hrader">
        <!-- 左侧logo -->
        <div class="logo">
            <img :src="_imgPath('logo.png')" alt="图片加载出错、、、">
        </div>

        <!-- 右侧头像、用户名 -->
        <el-dropdown @command="handleCommand">
            <div class="user">
                <el-avatar :src="user.avatar || _imgPath('avatar.png')"></el-avatar>
                <span class="txt">{{ user.username }}</span>
            </div>

            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="update">修改资料</el-dropdown-item>
                <el-dropdown-item command="center">个人中心</el-dropdown-item>
                <el-dropdown-item command="out">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <!-- 修改资料组件 -->
        <UpdateUser @cancel="handleCancel" v-if="updata_user" :personal="personal"></UpdateUser>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import UpdateUser from '@/components/update_user'
export default {
    components: {
        UpdateUser,
    },
    data() {
        return {
            updata_user: false, // 修改资料
            personal: false, // 个人中心
        }
    },
    computed: {
        ...mapGetters(['user'])
    },
    methods: {
        // 修改资料、退出登录逻辑
        handleCommand(data) {
            switch (data) {
                case 'update': {
                    this.updata_user = true
                    break;
                }
                case 'center': {
                    this.updata_user = true
                    this.personal = true
                    break
                }
                case 'out': {
                    sessionStorage.removeItem('user')
                    sessionStorage.removeItem('token')
                    this.$router.push('/login')
                    break
                }
            }
        },

        // 取消修改资料
        handleCancel() {
            this.updata_user = false
            this.personal = false
        }
    }
};
</script>

<style lang="less" scoped>
.hrader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        width: 200px;
        text-align: center;
    }

    .user {
        margin-right: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;

        .el-avatar {
            margin-right: 20px;
        }

        .txt {
            color: #fff;
        }
    }
}
</style>